﻿@inject Microsoft.Extensions.Localization.IStringLocalizer<MainLayout> _localizer

<MudAppBar Elevation="25">
    <MudIcon Icon="@CustomIcons.BlazorHero" Size="Size.Large" ViewBox="0 0 500 500" />
    <MudText Typo="Typo.h6" Class="ml-4">Blazor Hero</MudText>
    <MudToolBar DisableGutters="true">
        <MudIconButton Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" OnClick="@((e) => DrawerToggle())" Class="ml-3" />
    </MudToolBar>
    <MudSpacer />
    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
        <MudButton DisableElevation Variant="Variant.Filled" Color="Color.Secondary" Link="https://www.buymeacoffee.com/codewithmukesh" Target="_blank" StartIcon="@Icons.Material.Filled.LocalDrink">@_localizer["Buy Me A Coffee"]</MudButton>
        <MudDivider Vertical="true" FlexItem="true" DividerType="DividerType.Middle" Class="mx-4 my-5" />
        <MudMenu EndIcon="@Icons.Filled.KeyboardArrowDown" Label="@_localizer["Support"]" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true">
            <MudText Typo="Typo.body2" Class="px-4 py-2"><b>@_localizer["Community"]</b></MudText>
            <MudMenuItem Link="https://www.facebook.com/codewithmukesh" Target="_blank">@_localizer["Facebook Page"]</MudMenuItem>
            <MudMenuItem Link="https://www.linkedin.com/in/iammukeshm/" Target="_blank">LinkedIn</MudMenuItem>
            <MudText Typo="Typo.body2" Class="px-4 py-2"><b>@_localizer["Resources"]</b></MudText>
            <MudMenuItem Link="https://mudblazor.com/" Target="_blank">@_localizer["MudBlazor Documentation"]</MudMenuItem>
            <MudMenuItem Link="https://codewithmukesh.com/blog/blazor-hero-quick-start-guide/" Target="_blank">@_localizer["Quick-Start Guide"]</MudMenuItem>
        </MudMenu>
        <LanguageSelector />
        <MudTooltip Text="@_localizer["Toggle right-to-left/left-to-right"]">
            <MudIconButton Icon="@Icons.Material.Filled.FormatTextdirectionRToL" Color="Color.Inherit" OnClick="@((e) => RightToLeftToggle())" />
        </MudTooltip>
        <MudTooltip Text="@_localizer["Toggle Dark Mode"]">
            <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => ToggleDarkMode())" />
        </MudTooltip>
        <MudTooltip Text="@_localizer["Fork Repository"]">
            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/blazorhero/CleanArchitecture" Target="_blank" />
        </MudTooltip>
    </MudHidden>
    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
        <LanguageSelector />
        <MudMenu Icon="@Icons.Filled.Settings" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true">
            <div class="px-2">
                    <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => ToggleDarkMode())" />
                    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/blazorhero/CleanArchitecture" Target="_blank" />
            </div>
            <MudText Typo="Typo.body2" Class="px-4 py-2"><b>@_localizer["Community"]</b></MudText>
            <MudMenuItem Link="https://www.facebook.com/codewithmukesh" Target="_blank">@_localizer["Facebook Page"]</MudMenuItem>
            <MudMenuItem Link="https://www.linkedin.com/in/iammukeshm/" Target="_blank">LinkedIn</MudMenuItem>
            <MudText Typo="Typo.body2" Class="px-4 py-2"><b>@_localizer["Resources"]</b></MudText>
            <MudMenuItem Link="https://mudblazor.com/getting-started/installation" Target="_blank">@_localizer["MudBlazor Documentation"]</MudMenuItem>
            <MudMenuItem Link="https://codewithmukesh.com/blog/blazor-hero-quick-start-guide/" Target="_blank">@_localizer["Quick-Start Guide"]</MudMenuItem>
        </MudMenu>
    </MudHidden>
    <MudMenu Direction="_rightToLeft ? Direction.Right : Direction.Left" OffsetX="true" Dense="true" Class="mt-1 ml-4">
        <ActivatorContent>
            @if (string.IsNullOrEmpty(ImageDataUrl))
            {
                <MudAvatar Color="Color.Secondary">@FirstLetterOfName</MudAvatar>
            }
            else
            {
                <MudAvatar Image="@ImageDataUrl" Style="height:50px; width:50px;"> </MudAvatar>
            }
        </ActivatorContent>
        <ChildContent>
            <UserCard Class="mt-n2" />
            <MudDivider Class="mb-2" />
            <MudListItem Text="@_localizer["Account"]" Href="/account" Icon="@Icons.Material.Outlined.Person" />
            <MudListItem Text="@_localizer["Logout"]" Icon="@Icons.Material.Filled.Logout" OnClick="Logout" />
        </ChildContent>
    </MudMenu>
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="25" ClipMode="DrawerClipMode.Always">
    <NavMenu />
</MudDrawer>
<MudMainContent>
    <MudContainer MaxWidth="MaxWidth.False" Class="mt-4">
        <CascadingValue Value="hubConnection">
            @ChildContent
        </CascadingValue>
    </MudContainer>
</MudMainContent>